<template>
  <div id="post">
    <div class="my-post">
      <div class="left all-classification">
        全部:
      </div>
      <div class="classification">
        <ul>
          <li @click="changeClass(index)" v-for="(item, index) in classificaList" class="left measure" :class="index === classificaIndex? 'active' : ''">
            <div class="class-item">
              {{ item.name }}
            </div>
          </li>
          <div class="clear"></div>
        </ul>
      </div>
      <div v-if="classificaIndex === 0" class="post-list">
        <div v-if="classificaList[0].hasPost">
          <div>
            <ul>
              <li v-for="(post, index) in postListZT" class="post-item">
                <div class="basic-box">
                  <div class="left portrait">
                    <img :src="post.us_headimg">
                  </div>
                  <div class="left">
                    <p class="name">
                      {{ post.us_nickname }}
                    </p>
                    <p class="time">
                      {{ post.time }}
                    </p>
                  </div>
                  <div class="left level">
                    Lv.6
                  </div>
                  <div v-if="post.fo_essence === '精华'" class="right quality">
                    精
                  </div>
                  <div v-if="post.fo_hot === '热门'" class="right quality">
                    热
                  </div>
                  <div v-if="post.fo_stick === '置顶'"  class="right" style="padding-top: 20px;">
                    <img src="../../../static/image/j_17.png">
                  </div>
                  <div class="clear"></div>
                </div>
                <div class="content">
                  <a @click="lookDetail(post.fo_id, post.fo_title)" href="javascript: void(0)">
                    <div class="title">
                      {{ post.fo_title }}
                    </div>
                  </a>
                  <div class="text" v-html="post.fo_content">
                  </div>
                  <div class="reply-click">
                <span>
                   回复: {{ post.fo_reply_number }}
                </span>
                    <span>
                   点击: {{ post.fo_click_number }}
                </span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div v-if="classificaList[0].total !== 0" class="pager">
            <Page @on-change="changePage" :current="classificaList[0].page + 1" :total="classificaList[0].total" :page-size="5"></Page>
          </div>
        </div>
        <div v-else style="line-height: 600px; font-size: 20px; text-align: center">
          您未在该论坛下发过帖子
        </div>
      </div>
      <div v-if="classificaIndex === 1" class="post-list">
        <div v-if="classificaList[1].hasPost">
          <div>
            <ul>
              <li v-for="(post, index) in postListPP" class="post-item">
                <div class="basic-box">
                  <div class="left portrait">
                    <img :src="post.us_headimg">
                  </div>
                  <div class="left">
                    <p class="name">
                      {{ post.us_nickname }}
                    </p>
                    <p class="time">
                      {{ post.time }}
                    </p>
                  </div>
                  <div class="left level">
                    Lv.6
                  </div>
                  <div v-if="post.fo_essence === '精华'" class="right quality">
                    精
                  </div>
                  <div v-if="post.fo_hot === '热门'" class="right quality">
                    热
                  </div>
                  <div v-if="post.fo_stick === '置顶'"  class="right" style="padding-top: 20px;">
                    <img src="../../../static/image/j_17.png">
                  </div>
                  <div class="clear"></div>
                </div>
                <div class="content">
                  <a @click="lookDetail(post.fo_id, post.fo_title)" href="javascript: void(0)">
                    <div class="title">
                      {{ post.fo_title }}
                    </div>
                  </a>
                  <div class="text" v-html="post.fo_content">
                  </div>
                  <div class="reply-click">
                <span>
                   回复: {{ post.fo_reply_number }}
                </span>
                    <span>
                   点击: {{ post.fo_click_number }}
                </span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div v-if="classificaList[1].total !== 0" class="pager">
            <Page @on-change="changePage" :current="classificaList[1].page + 1" :total="classificaList[1].total" :page-size="5"></Page>
          </div>
        </div>
        <div v-else style="line-height: 600px; font-size: 20px; text-align: center">
          您未在该论坛下发过帖子
        </div>
      </div>
      <div v-if="classificaIndex === 2" class="post-list">
        <div v-if="classificaList[2].hasPost">
          <div>
            <ul>
              <li v-for="(post, index) in postListDQ" class="post-item">
                <div class="basic-box">
                  <div class="left portrait">
                    <img :src="post.us_headimg">
                  </div>
                  <div class="left">
                    <p class="name">
                      {{ post.us_nickname }}
                    </p>
                    <p class="time">
                      {{ post.time }}
                    </p>
                  </div>
                  <div class="left level">
                    Lv.6
                  </div>
                  <div v-if="post.fo_essence === '精华'" class="right quality">
                    精
                  </div>
                  <div v-if="post.fo_hot === '热门'" class="right quality">
                    热
                  </div>
                  <div v-if="post.fo_stick === '置顶'"  class="right" style="padding-top: 20px;">
                    <img src="../../../static/image/j_17.png">
                  </div>
                  <div class="clear"></div>
                </div>
                <div class="content">
                  <a @click="lookDetail(post.fo_id, post.fo_title)" href="javascript: void(0)">
                    <div class="title">
                      {{ post.fo_title }}
                    </div>
                  </a>
                  <div class="text" v-html="post.fo_content">
                  </div>
                  <div class="reply-click">
                <span>
                   回复: {{ post.fo_reply_number }}
                </span>
                    <span>
                   点击: {{ post.fo_click_number }}
                </span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div v-if="classificaList[2].total !== 0" class="pager">
            <Page @on-change="changePage" :current="classificaList[2].page + 1" :total="classificaList[2].total" :page-size="5"></Page>
          </div>
        </div>
        <div v-else style="line-height: 600px; font-size: 20px; text-align: center">
          您未在该论坛下发过帖子
        </div>
      </div>
      <div v-if="classificaIndex === 3" class="post-list">
        <div v-if="classificaList[3].hasPost">
          <div>
            <ul>
              <li v-for="(post, index) in postListCX" class="post-item">
                <div class="basic-box">
                  <div class="left portrait">
                    <img :src="post.us_headimg">
                  </div>
                  <div class="left">
                    <p class="name">
                      {{ post.us_nickname }}
                    </p>
                    <p class="time">
                      {{ post.time }}
                    </p>
                  </div>
                  <div class="left level">
                    Lv.6
                  </div>
                  <div v-if="post.fo_essence === '精华'" class="right quality">
                    精
                  </div>
                  <div v-if="post.fo_hot === '热门'" class="right quality">
                    热
                  </div>
                  <div v-if="post.fo_stick === '置顶'"  class="right" style="padding-top: 20px;">
                    <img src="../../../static/image/j_17.png">
                  </div>
                  <div class="clear"></div>
                </div>
                <div class="content">
                  <a @click="lookDetail(post.fo_id, post.fo_title)" href="javascript: void(0)">
                    <div class="title">
                      {{ post.fo_title }}
                    </div>
                  </a>
                  <div class="text" v-html="post.fo_content">
                  </div>
                  <div class="reply-click">
                <span>
                   回复: {{ post.fo_reply_number }}
                </span>
                    <span>
                   点击: {{ post.fo_click_number }}
                </span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div v-if="classificaList[3].total !== 0" class="pager">
            <Page @on-change="changePage" :current="classificaList[3].page + 1" :total="classificaList[3].total" :page-size="5"></Page>
          </div>
        </div>
        <div v-else style="line-height: 600px; font-size: 20px; text-align: center">
          您未在该论坛下发过帖子
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'PersonalPost',
    data () {
      return {
        classificaList: [
          {name: '主题论坛', isFirst: false, page: 0, total: 0, hasPost: true},
          {name: '品牌论坛', isFirst: true, page: 0, total: 0, hasPost: true},
          {name: '地区论坛', isFirst: true, page: 0, total: 0, hasPost: true},
          {name: '车系俱乐部', isFirst: true, page: 0, total: 0, hasPost: true}],
        classificaIndex: 0,
        // 地区
        postListZT: [],
        postListPP: [],
        postListDQ: [],
        postListCX: [],
        type: '主题'
      }
    },
    methods: {
      setCrumbs: function () {
        let crumbs = []
        crumbs[0] = {
          title: '个人中心',
          link: ''
        }
        crumbs[1] = {
          title: '我发布的帖子',
          link: ''
        }
        this.$store.commit('crumbs', crumbs)
      },
      // 切换种类
      changeClass: function (index) {
        let that = this
        if (that.classificaIndex === index) {
        } else {
          let type = ''
          if (index === 0) {
            type = '主题'
          } else if (index === 1) {
            type = '品牌'
          } else if (index === 2) {
            type = '地区'
          } else if (index === 3) {
            type = '车系'
          }
          that.classificaIndex = index
          that.type = type
          if (that.classificaList[that.classificaIndex].isFirst) {
            that.getMyPost()
          } else {
          }
        }
      },
      // 获取我的帖子列表
      getMyPost: function () {
        let that = this
        let page = that.classificaList[that.classificaIndex].page
        let typeClass = that.type
        that.$chaos.ajax({
          url: '/Forum/getForumList',
          data: {
            type: typeClass,
            page: page,
            limit: 5
          },
          userinfo: true,
          callback: function (type, res) {
            if (type === 'success') {
              if (typeClass === '主题') {
                if (that.classificaList[0].page === 0) {
                  that.classificaList[0].total = parseInt(res.result.count)
                  if (res.result.count === 0) {
                    that.classificaList[0].hasPost = false
                    return false
                  }
                }
                that.classificaList[0].hasPost = true
                for (let i in res.result.list) {
                  let time = new Date(res.result.list[i].time)
                  let year = time.getFullYear()
                  let month = that.addZone(time.getMonth() + 1)
                  let day = that.addZone(time.getDate())
                  res.result.list[i].time = year + '-' + month + '-' + day
                }
                that.postListZT = res.result.list
                that.classificaList[0].isFirst = false
              }
              if (typeClass === '品牌') {
                if (that.classificaList[1].page === 0) {
                  that.classificaList[1].total = parseInt(res.result.count)
                  if (res.result.count === 0) {
                    that.classificaList[1].hasPost = false
                    return false
                  }
                }
                that.classificaList[1].hasPost = true
                for (let i in res.result.list) {
                  let time = new Date(res.result.list[i].time)
                  let year = time.getFullYear()
                  let month = that.addZone(time.getMonth() + 1)
                  let day = that.addZone(time.getDate())
                  res.result.list[i].time = year + '-' + month + '-' + day
                }
                that.postListPP = res.result.list
                that.classificaList[1].isFirst = false
              }
              if (typeClass === '地区') {
                if (that.classificaList[2].page === 0) {
                  that.classificaList[2].total = parseInt(res.result.count)
                  if (res.result.count === 0) {
                    that.classificaList[2].hasPost = false
                    return false
                  }
                }
                that.classificaList[2].hasPost = true
                for (let i in res.result.list) {
                  let time = new Date(res.result.list[i].time)
                  let year = time.getFullYear()
                  let month = that.addZone(time.getMonth() + 1)
                  let day = that.addZone(time.getDate())
                  res.result.list[i].time = year + '-' + month + '-' + day
                }
                that.postListDQ = res.result.list
                that.classificaList[2].isFirst = false
              }
              if (typeClass === '车系') {
                if (that.classificaList[3].page === 0) {
                  that.classificaList[3].total = parseInt(res.result.count)
                  if (res.result.count === 0) {
                    that.classificaList[3].hasPost = false
                    return false
                  }
                }
                that.classificaList[3].hasPost = true
                for (let i in res.result.list) {
                  let time = new Date(res.result.list[i].time)
                  let year = time.getFullYear()
                  let month = that.addZone(time.getMonth() + 1)
                  let day = that.addZone(time.getDate())
                  res.result.list[i].time = year + '-' + month + '-' + day
                }
                that.postListCX = res.result.list
                that.classificaList[3].isFirst = false
              }
            }
          }
        })
      },
      changePage: function (e) {
        let that = this
        let page = e - 1
        console.log(that.classificaIndex)
        if (that.classificaList[that.classificaIndex].page === page) {
        } else {
          that.classificaList[that.classificaIndex].page = page
          that.getMyPost()
          let $ = require('jquery')
          $('html,body').animate({
            scrollTop: 200
          }, 200)
        }
      },
      // 小于10加0
      addZone: function (num) {
        if (num < 10) {
          num = '0' + num
        }
        return num
      },
      lookDetail: function (id, title) {
        this.$router.push('/Forums/postDetail?type=我的帖子&foId=' + id + '&title=' + title)
      }
    },
    created () {
      this.$emit('changeCurrent', 4)
      this.setCrumbs()
      this.getMyPost()
    },
    activated () {
      this.setCrumbs()
    }
  }
</script>

<style>
  .pager{
    text-align: center;
    padding:20px 0;
  }
  /*分页样式*/
  .ivu-page-total{
    vertical-align: -2px;
  }
  .ivu-page-item-active{
    background: #2d8cf0!important;
  }
  .ivu-page-item-active a, .ivu-page-item-active:hover a{
    color: #fff!important;
  }
  .ivu-page-item{
    border:1px solid #2d8cf0!important;
  }
  .ivu-page-item-jump-next, .ivu-page-item-jump-prev{
    position: relative!important;
  }
  .ivu-page-item-jump-next:after, .ivu-page-item-jump-prev:after{
    position: absolute;
    top: 0px;
  }
</style>
